import React from 'react';
import {Tabs} from 'antd';
import NameGenerator from './NameGenerator';
import SurnameGenerator from './SurnameGenerator';
import GeneratorTable from './GeneratorTable';
import ChinaDistrict from './ChinaDistrict';

import {addOnResize} from '../utils/listener';
import './style/index.less';
import ToolKit from '../utils/ToolKit';

const TabPane = Tabs.TabPane;

export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            y: document.body.clientHeight - 240,
            identityColumns: [{
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
                width: 100,
            }, {
                title: '身份证号',
                dataIndex: 'IDnumber',
                key: 'IDnumber',
                width: 200,
            }, {
                title: '手机号',
                dataIndex: 'mobile',
                key: 'mobile',
                width: 150,
            }, {
                title: '银行卡号',
                dataIndex: 'bankNumber',
                key: 'bankNumber',
                width: 200,
            }, {
                title: '年龄',
                dataIndex: 'age',
                key: 'age',
                width: 100,
                filters: [],
            }, {
                title: '性别',
                dataIndex: 'gender',
                key: 'gender',
                width: 100,
                filters: [],
            }, {
                title: '出生日期',
                dataIndex: 'birth',
                key: 'birth',
                width: 100,
            }, {
                title: '所属地区',
                dataIndex: 'origin',
                key: 'origin',
                width: 380,
                filters: [],
            }, {
                title: '手机号归属地',
                dataIndex: 'mobileLocation',
                key: 'mobileLocation',
                width: 150,
            }, {
                title: '手机号运营商',
                dataIndex: 'mobileOperator',
                key: 'mobileOperator',
                width: 150,
                filters: [],
            }, {
                title: '银行卡发卡行',
                dataIndex: 'bankName',
                key: 'bankName',
                width: 150,
                filters: [],
            }, {
                title: '银行卡种类',
                dataIndex: 'bankCardType',
                key: 'bankCardType',
                width: 150,
                filters: [],
            }],
            companyColumns: [
                {
                    title: '公司名',
                    dataIndex: 'companyName',
                    key: 'companyName',
                    width: 250,
                },
                {
                    title: '统一社会信用代码',
                    dataIndex: 'socialCode',
                    key: 'socialCode',
                    width: 250,
                },
                {
                    title: '组织机构代码',
                    dataIndex: 'code',
                    key: 'code',
                    width: 250,
                },
                {
                    title: '登记管理部门',
                    dataIndex: 'registrationAdmin',
                    key: 'registrationAdmin',
                    width: 250,
                    filters: [],
                },
                {
                    title: '机构类别',
                    dataIndex: 'category',
                    key: 'category',
                    width: 150,
                    filters: [],
                },
                {
                    title: '登记管理机关',
                    dataIndex: 'registrationAuthority',
                    key: 'registrationAuthority',
                    width: 250,
                    filters: [],
                },
            ],
        };
    }

    componentDidMount() {
        addOnResize(() => {
            this.setState({
                y: document.body.clientHeight - 240,
            });
        });

    }

    getDistrictFullName = (item) => {
        let retList = [item.name];
        let newParent = item.parent;
        while(newParent){
            retList.push(newParent.name);
            newParent = newParent.parent;
        }
        retList.reverse();
        return retList.join(' ');
    }

    _genNames = (count) => {
        const nameGeneral = new NameGenerator(-1, -1);
        const sunameGenderator = new SurnameGenerator();
        const chinaDistrict = new ChinaDistrict();

        return new Promise((resolve, reject) => {
            Promise.all([
                sunameGenderator.getSurnames(count),
                nameGeneral.genNames(count),
                chinaDistrict.getAllLeafs(),
            ])
                .then((listArray) => {
                    const surnameList = listArray[0];       //姓
                    const nameList = listArray[1];          //名
                    const districts = listArray[2];          //地区及代码对象

                    console.log('districts',districts);
                    const retList = [];
                    surnameList.forEach((surname, index) => {
                        let districtsIndex = ToolKit.randomNumber(districts.length - 1); //在长度范围内随机取数
                        retList.push({name:`${surname}${nameList[index]}`,origin:this.getDistrictFullName(districts[districtsIndex])});
                    });
                    resolve(retList);
                }).catch((e) => {
                reject(e);
            });
        });
    };

    render() {
        const {y, identityColumns, companyColumns} = this.state;
        return (<div>
            <Tabs defaultActiveKey="1">
                <TabPane tab="身份信息" key="1">
                    <GeneratorTable
                        name='身份信息'
                        columns={identityColumns}
                        y={y}
                        getDataFuc={this._genNames}
                        demoData={{
                            IDnumber: '110101199003074493',
                            mobile: '12356481286',
                            bankNumber: '110101199003074493',
                            age: '27',
                            gender: '男',
                            birth: '1993-11-25',
                            origin: '北京东城区',
                            mobileLocation: '北京东城区',
                            mobileOperator: '江苏移动',
                            bankName: '中国银行',
                            bankCardType: '借记卡',
                        }}
                    />
                </TabPane>
                <TabPane tab="公司信息" key="2">
                    <GeneratorTable
                        name='公司信息'
                        columns={companyColumns}
                        y={y}
                        getDataFuc={this._genNames}
                        demoData={{
                            companyName: '重庆小小信息技术有限公司',
                            socialCode: '12345678911123654',
                            code: 'A123456',
                            registrationAdmin: '重庆渝中工商局',
                            category: '工商',
                            registrationAuthority: '重庆工商局',
                        }}
                    />
                </TabPane>
            </Tabs>
        </div>);
    }
}
